<template>
  <div class="page-container">
    <div>
      <h1>404</h1>
      <h2>oops! You seem to have gone missing...</h2>
      <RouterLink :to="{ path: '/', replace: true }" class="el-button el-button--primary"
        >回到首页</RouterLink
      >
    </div>
    <img src="@/assets/images/404.gif" alt="404动画" />
  </div>
</template>

<script setup lang="ts">
// 模块引入
//import { ref } from 'vue'
defineOptions({
  name: 'NotFound',
  inheritAttrs: false
})
</script>

<style scoped lang="scss">
.page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: white;
  div {
    margin-right: 50px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 20px;
    h1 {
      font-size: 60px;
      color: #409eff;
      font-weight: 600;
    }
    .el-button {
      text-decoration: none;
    }
  }
}
</style>
